<script setup>
import {watch, onWatcherCleanup, ref} from 'vue'

const id = ref(1)
const id2 = ref(1)

watch(id, (newId) => {

  new Promise((resolve) => {setTimeout(resolve,3000)}).then(() => {
    // 回调逻辑
    console.log(`回调完成---- id: ${newId}`)
  })

  onWatcherCleanup(() => {
    // 终止过期请求
    console.log(`终止过期请求---- id: ${newId}`)
  })
})

watch(id2, async (newId) => {
  let allowFlag = true

  const p = new Promise((resolve) => {setTimeout(resolve,3000)}).then(
      () => {
        // 回调逻辑
        if (allowFlag) {
          console.log(`回调完成---- id: ${newId}`)
        }
      }
  )
  await p

  onWatcherCleanup(() => {
    // 终止 Promise
    allowFlag = false
    console.log(`终止过期请求---- id: ${newId}`)
  })



})
</script>

<template>
  <p>id: {{ id }}</p>
  <button @click="id++">+</button>

  <p>id2: {{ id2 }}</p>
  <button @click="id2++">+</button>
</template>

<style scoped>

</style>